import { Line, LineChart, ResponsiveContainer, XAxis, YAxis } from 'recharts'
import Label from '../Label'
import { tick1 } from './Section2'

const data = [
  { name: 2, v: 15 },
  { name: 4, v: 45 },
  { name: 6, v: 17 },
  { name: 8, v: 60 },
  { name: 10, v: 44 },
  { name: 12, v: 58 },
]
function tickX(props: any) {
  const { y, payload, ...attrs } = props
  return (
    <text {...attrs} y={y + 8} fill="#f0f0f0">
      {props.payload.value}月
    </text>
  )
}
export default function Section6(props: React.HTMLAttributes<HTMLElement>) {
  return (
    <Label {...props} title="穆棱市国家农村展业融合发展示范园" noBorder>
      <div className="flex flex-col items-stretch h-full">
        <div className="flex-1">
          <ResponsiveContainer>
            <LineChart data={data}>
              <XAxis dataKey="name" tick={tickX} padding={{ left: 30, right: 30 }} />
              <YAxis tick={tick1} padding={{ top: 10 }} />
              <Line dataKey="v" stroke="#3483C5" strokeWidth={3} />
            </LineChart>
          </ResponsiveContainer>
        </div>
        <p className="flex-none h-10 leading-10">全长4.1公里 占地12000亩 流转土地6000亩</p>
        <p className="flex-none h-10 leading-10">带动农户860户 户增加收入3500元</p>
      </div>
    </Label>
  )
}
